<template>
	<div class="yuangongguanli">
		<transition name="mybox2">
			<div class="left" v-show="cebian_show">
				<div class="topNav"><i class="el-icon-document"></i><p>&nbsp;员工管理</p></div>
				<!--树状图带筛选-->
				<div class="bottomNav">
					<el-input
					  placeholder="输入关键字进行过滤"
					  v-model="filterText">
					</el-input>
					
					<el-tree
					  class="filter-tree"
					  :data="data2"
					  :props="defaultProps"
					  default-expand-all
					  :filter-node-method="filterNode"
					  ref="tree2"
					  @node-click="node_click">
					</el-tree>
				</div>
				

				
				
			</div>
		</transition>
		
		<!--中间的线-->
		<div class="line_div"></div>
		
		<div class="right">
			<div class="topNav"><i class="el-icon-news"></i><p>&nbsp;员工管理</p></div>
			
			<div class="rigth_bottom">
				<!--头部按钮部分-->
				<div class="btn">
					<div class="dd1">
						<el-button type="primary" icon="el-icon-plus"  @click="AddButton">添加</el-button>
						<el-button type="primary" icon="el-icon-delete">删除</el-button>
						<el-dropdown @command="handleCommand">
							<el-button type="primary">
							    更多<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="a"><i class="el-icon-circle-plus-outline" ></i>&nbsp;完善分配信息</el-dropdown-item>
								<el-dropdown-item command="b"><i class="el-icon-goods" ></i>&nbsp;分配到其他</el-dropdown-item>
								<el-dropdown-item command="c"><i class="el-icon-sold-out" ></i>&nbsp;导入</el-dropdown-item>
							    <el-dropdown-item command="d"><i class="layui-icon layui-icon-password" ></i>&nbsp;导出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						
						
						
						
					</div>
					
					<div class="dd2">
						<el-input  placeholder="请输入用户ID" suffix-icon="el-icon-date" class="dd2_1" v-model="input1"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="layui_sousuo">搜索</el-button>
						
						<el-popover
						  placement="bottom"
						  width="250"
						  height='500'
						  v-model="visible2"
						  trigger="click">
						  <ul>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">账户名称</p><el-input v-model="input" placeholder="输入账户名称" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;">
						    	<p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">启用状态</p>
						    	<el-select v-model="value" placeholder="请选择">
								    <el-option label="已启用" value="已启用"></el-option>
								    <el-option label="未启用" value="未启用"></el-option>
								</el-select>
						    </li>
						    <li style="display: flex;margin-bottom: 10px;">
						    	<p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">ERP同步状态</p>
						    	<el-select v-model="value2" placeholder="请选择">
								    <el-option label="已同步" value="已同步"></el-option>
								    <el-option label="未同步" value="未同步"></el-option>
								</el-select>
						    </li>
						    <!--<li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right:40px;">作者</p><el-input v-model="input" placeholder="输入作者" suffix-icon="el-icon-date"></el-input></li>-->
						    <li style="display: flex;margin-bottom: 10px;justify-content: space-around;">
						    	<el-button type="primary" size="mini" icon="el-icon-plus">搜索</el-button>
								<el-button type="primary" size="mini" icon="el-icon-delete">重置</el-button>
								<el-button type="primary" size="mini" icon="el-icon-goods" @click="visible2 = false">取消</el-button>
						    </li>
						  </ul>
						  <el-button type="primary" slot="reference"><i class="layui-icon layui-icon-shrink-right"></i></el-button>
						</el-popover>
						
					</div>
				</div>
				
				<!--数据表格部分-->
				<div class="table">
					<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
					<script type="text/html" id="barDemo">
					  <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
					  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
					  <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
					</script>
				</div>
				
			</div>
			
			
			<!--收缩侧边栏按钮-->
			<div class="shousuo" @click="guanbi"><i class="el-icon-caret-left"></i></div>
		</div>
		
		<!--数据表格的导入按钮，点击时显示-->
		<el-dialog title="导入" :visible.sync="dialogFormVisible2">
			<el-upload
			  class="upload-demo"
			  ref="upload"
			  action="https://jsonplaceholder.typicode.com/posts/"
			  :on-preview="handlePreview"
			  :on-remove="handleRemove"
			  :file-list="fileList"
			  :auto-upload="false">
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">导入</el-button>
			  <div slot="tip" class="el-upload__tip">只能上传表格文件，且不超过500kb</div>
			</el-upload>

		</el-dialog>
		
		<!--点击添加按钮出现打开嵌套表单-->
		<!--<el-dialog title="添加" :visible.sync="dialogFormVisible">
			<div class="from">
				<div class="from-left">
					<el-form :model="form">
					    <el-form-item label="用户ID" label-width="120px" required>
					      	<el-input v-model="form.userId" auto-complete="off" :placeholder="$t('message.hint9')"></el-input>
					    </el-form-item>
					    <el-form-item label="用户名称" label-width="120px" required>
					      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入用户名称"></el-input>
					    </el-form-item>
					    <el-form-item label="业务组织代码" label-width="120px" required>
					      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入业务组织代码"></el-input>
					    </el-form-item>
					    <el-form-item label="业务组织名称" label-width="120px" required>
					      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入业务组织名称"></el-input>
					    </el-form-item>
					    <el-form-item label="是否系统账户" label-width="120px" required>
					      	<el-select v-model="form.region" placeholder="请选择是否系统账户" style="width: 100%;">
					        	<el-option label="是" value="shanghai"></el-option>
					        	<el-option label="否" value="beijing"></el-option>
					      	</el-select>
					    </el-form-item>
					    <el-form-item label="员工代码" label-width="120px" required>
					      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入员工代码"></el-input>
					    </el-form-item>
					    <el-form-item label="员工姓名" label-width="120px" required>
					      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入员工姓名"></el-input>
					    </el-form-item>
					    <el-form-item label="允许多点登录" label-width="120px" required>
					      	<el-select v-model="form.region" placeholder="请选择是否允许多点登录" style="width: 100%;">
					        	<el-option label="是" value="shanghai"></el-option>
					        	<el-option label="否" value="beijing"></el-option>
					      	</el-select>
					    </el-form-item>
					    <el-form-item label="启用状态" label-width="120px" required>
					      	<el-select v-model="form.region" placeholder="请选择启用状态" style="width: 100%;">
					        	<el-option label="是" value="shanghai"></el-option>
					        	<el-option label="否" value="beijing"></el-option>
					      	</el-select>
					    </el-form-item>
					</el-form>
				</div>
				
				<div class="from-right">
					
				</div>
			</div>-->
			
			<div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	export default{
		name:'yuangongguanli',
		data(){
			return{
				fileList:[],//导入表格
				dialogFormVisible2: false,//导入
				value: '',//高级搜索的下拉选择（启用状态）
				value2: '',//高级搜索的下拉选择（ERP状态）
				cebian_show:true,//控制侧边栏展开和收起
				visible2:false,//控制高级搜索显示和隐藏
				input:'',
				input1:'',//搜索的输入框
				//树状图带筛选
				filterText: '',
		        data2: [{
		          id: 1,
		          label: '铜冠有色金属集团股份有限公司',
			        children: [{
		            	id: 2,
		            	label: '铜冠信息科技有限责任公司',
			            children: [{
			              id: 9,
			              label: '研发部'
			            }, {
			              id: 10,
			              label: '财务部'
			            },{
			              id: 11,
			              label: '项目部'
			            },{
			              id: 12,
			              label: '售后部'
			            }]
		          	},{
		          		id: 3,
		          		label: '铜冠地产',
			          	children: []
			        },{
		          		id: 4,
		          		label: '安徽铜冠铜箔有限公司',
			          	children: []
			        },{
		          		id: 5,
		          		label: '铜冠电工有限公司',
			          	children: [{
			            	id: 6,
			            	label: '芜湖铜冠电工有限公司'
			          	}, {
			            	id: 7,
			            	label: '铜陵有色股份线材有限公司'
			          	}, {
			            	id: 8,
			            	label: '芜湖金奥微细漆包线有限公司'
			          	}]
			        }]
		        }],
		        defaultProps: {
		          children: 'children',
		          label: 'label'
		        },
		        //表单的提交
		        form: {
		          userId: '',//用户ID
		          userName: '',//用户名称
		          date1: '',
		          date2: '',
		          delivery: false,
		          type: [],
		          resource: '',
		          desc: ''
		        },
		        
		        
			}
		},
		mounted(){
			this.layui()
		},
		watch:{
			//树状图带筛选
		    filterText(val) {
		    	console.log(val)
		        this.$refs.tree2.filter(val);
		    }
		},
		methods:{
			layui(){
				layui.use('table', function(){
				  	var table = layui.table;
				  
				  	//第一个实例
				  	table.render({
					    elem: '#LAY_table_user'
					    ,id: 'testReload'
					    ,url: '../../../../../static/json/yuangongguanli.json' //数据接口
					    ,page: true //开启分页
					    ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
					    ,cols: [[ //表头
					    	{type:'checkbox'}
					      	,{field: 'id', title: '员工代码', width:120, sort: true, align: 'left'}
					      	,{field: 'username', title: '员工姓名', width:100,align: 'left'}
					      	,{field: 'sex', title: '性别', width:80, sort: true,align: 'left'}
					      	,{field: 'state', title: '启用状态', width:100, sort: true,align: 'left'}
					      	,{field: 'sign', title: '与ERP同步', width:120,align: 'left'} 
					      	,{field: 'experience', title: '用户描述', width: 100,align: 'left'}
					      	,{field: 'experience', title: '创建人', width: 100,align: 'left'}
					      	,{field: 'experience', title: '创建时间', width: 100,align: 'left'}
					      	,{field: 'fenpei', title: '分配组织', width: 100,align: 'left'}
					      	,{field: 'chuangjian', title: '创建用户', width: 100,align: 'left' }
					      	,{field: 'classify', title: '操作', width: 180,align: 'center',toolbar: '#barDemo'}
					    ]]
					});
					
					 //监听工具条
					table.on('tool(user)', function(obj){
					    var data = obj.data;
					    if(obj.event === 'detail'){
					      layer.msg('ID：'+ data.id + ' 的查看操作');
					    } else if(obj.event === 'del'){
					      layer.confirm('真的删除行么', function(index){
					        obj.del();
					        layer.close(index);
					      });
					    } else if(obj.event === 'edit'){
					      layer.alert('编辑行：<br>'+ JSON.stringify(data))
					    }
					});
					
					  
				});
			},
			//点击搜索
			layui_sousuo(){
				let table = layui.table;
				let input1 = this.input1
				
			    //执行重载
			    table.reload('testReload', {//testReload你要重新渲染哪个表格
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			            id: input1,
			        }
			    });
				
			},
			//点击添加
			add_table(){
				
			},
			//树状图带筛选
			filterNode(value, data){
				console.log(value, data)
		        if (!value) return true;
		        return data.label.indexOf(value) !== -1;
		   	},
		   //点击树状节点
			node_click(res){
				console.log(res)
			},
			
			//点击关闭侧边栏按钮
		    guanbi(){
		    	this.cebian_show=!this.cebian_show
		    },
		    
		    //导入表格
		    submitUpload() {
		        this.$refs.upload.submit();
		    },
		    handleRemove(file, fileList) {
		        console.log(file, fileList);
		    },
		    handlePreview(file) {
		        console.log(file);
		    },
		    //点击更多按钮
		    handleCommand(command){
		    	if(command=='a'){
		    		alert(command)
		    	}
		    },
		    //点击添加按钮
		    AddButton(){
		    	this.$router.push({name:'AddButton'})
		    }
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.yuangongguanli{
		width: 98%;height: 95%;padding: 10px;background: #f2f2f2;min-width: 1000px;display: flex;
		.left{
			height: 100%;width:240px;background: white;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-document{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			.bottomNav{
				padding: 10px;box-sizing: border-box;
			}
			
		}
		/*中间的线div*/
		.line_div{border-left:1px solid #ddd ;width: 1px;height: 100%;margin:0 5px;}
		
		.right{
			background:white;height:100%;width: 78%;z-index: 1;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-news{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			
			.rigth_bottom{
				margin: 10px;
				.btn{
					display: flex;justify-content: space-between;
					.dd2{
						display: flex;
						.dd2_1{margin-right: 5px;margin-top: 2px;}
					}
				}
				.table{margin-top: 20px;border: 1px solid #ddd;}
			}
			
			.shousuo{
				position: absolute;bottom: 10%;width: 25px;height: 50px;background: #ddd;line-height: 50px;text-align: center;cursor: pointer;color: white;
			}
			.shousuo:hover{background: #409EFF;}
		}
		
	}
	/*控制侧边栏展开和收缩动画*/
    .mybox2-leave-active,.mybox2-enter-active{
        transition:  all 1s ease; 
    }
    .mybox2-leave-active,.mybox2-enter{
        width:0px !important;
    }
    .mybox2-leave,.mybox2-enter-active{
        width:240px;
    }
</style>